// 元素
const sendBtn = document.getElementById("send-btn"); // 发送按钮
const userInput = document.getElementById("user-input"); // 用户输入框
const chatDisplay = document.getElementById("chat-display"); // 聊天内容展示区

// 添加消息到聊天展示区的函数
function addMessage(message, sender) {
  const messageElement = document.createElement("div"); // 创建消息元素
  messageElement.classList.add("message", sender === "user" ? "user-message" : "server-message"); // 根据发送者添加对应的样式
  messageElement.innerText = message; // 设置消息文本
  chatDisplay.appendChild(messageElement); // 将消息添加到聊天展示区
  chatDisplay.scrollTop = chatDisplay.scrollHeight; // 自动滚动到底部
  return messageElement; // 返回创建的消息元素
}

// 动态更新消息内容的函数
function updateMessageContent(messageElement, content) {
  messageElement.innerText += content; // 动态追加内容，不换行
  chatDisplay.scrollTop = chatDisplay.scrollHeight; // 自动滚动到底部
}

// 处理消息发送的函数
function sendMessage() {
  const userMessage = userInput.value.trim(); // 获取并清理用户输入内容
  if (userMessage) {
    // 显示用户的消息
    addMessage(userMessage, "user");
    userInput.value = ""; // 清空输入框内容

    // 创建一个空的消息元素用于显示流式响应
    const serverMessageElement = addMessage("", "server");

    // 将用户消息发送到服务器并处理流式响应
    fetchServerResponse(userMessage, serverMessageElement);
  }
}

// 与服务器通信的函数（处理流式响应）
function fetchServerResponse(userMessage, messageElement) {
  fetch("http://localhost:5000/stream-chat", {
    method: "POST", // 使用 POST 方法发送请求
    headers: {
      "Content-Type": "application/json", // 设置请求头为 JSON 格式
    },
    body: JSON.stringify({ message: userMessage }), // 将用户消息作为请求体发送
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error("服务器错误"); // 如果响应状态不正常，则抛出错误
      }
      const reader = response.body.getReader(); // 获取响应的流读取器
      const decoder = new TextDecoder("utf-8"); // 用于解码字节流为字符串

      // 逐块读取响应流
      function readChunk() {
        return reader.read().then(({ done, value }) => {
          if (done) return; // 如果读取完成，则退出
          const chunk = decoder.decode(value); // 解码当前块
          updateMessageContent(messageElement, chunk); // 更新消息内容
          return readChunk(); // 递归读取下一块
        });
      }

      return readChunk(); // 开始读取流
    })
    .catch((error) => {
      console.error("错误:", error); // 在控制台打印错误信息
      updateMessageContent(messageElement, "无法连接到服务器。请稍后再试。"); // 显示错误提示
    });
}

// 事件监听
sendBtn.addEventListener("click", sendMessage); // 点击发送按钮时调用 sendMessage 函数
userInput.addEventListener("keypress", (e) => {
  if (e.key === "Enter") sendMessage(); // 按下 Enter 键时调用 sendMessage 函数
});
